<template>
  <el-form ref="deptForm" :model="form" :rules="rules" label-width="120px">
    <el-form-item label="部门名称" prop="name">
      <el-input v-model="form.name" style="width:80%" placeholder="2-10个字符" />
    </el-form-item>
    <el-form-item label="部门编码" prop="code">
      <el-input v-model="form.code" style="width:80%" placeholder="2-10个字符" />
    </el-form-item>
    <el-form-item label="部门负责人" prop="manager">
      <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
        <el-option v-for="item in employees" :key="item.id" :value="item.username" :label="item.username" />
      </el-select>
    </el-form-item>
    <el-form-item label="部门介绍" prop="introduce">
      <el-input v-model="form.introduce" style="width:80%" placeholder="2-300个字符" type="textarea" :rows="3" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
      <el-button size="small" @click="hCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { getEmployees } from '@/api/employees'
import { getDepartment, getDepartmentById, updateDepartmentById } from '@/api/departments'
export default {
  props: {
    id: {
      type: String,
      required: true
    },
    edit: {
      type: Boolean,
      required: true

    },
    originerList: {
      type: Array,
      required: true
    }
  },
  data() {
    // code部门编码深度校验
    const validateCode = (rule, value, callback) => {
      // this.originerList.some(item => item.code === value) ? callback() : callback(new Error(value + '已存在'))
      let codeList = null
      if (this.edit) {
        codeList = this.originerList.filter(item => item.id !== this.id).map(({ code }) => code)
      } else {
        codeList = this.originerList.map(({ code }) => code)
      }
      if (codeList.includes(value)) {
        callback(new Error(value + '已存在'))
      } else {
        callback()
      }
    }
    const validateName = (rule, value, callback) => {
      // 做添加子部门时，获取pid。
      let nameList = null
      if (this.edit) {
        // 做编辑功能时，需求：不能把名字修改成同级部门的其他部门，但是自己可以存在
        // 通过寻找到pid来排除其他部门
        // 先找到同id的对象，在获取到对象中的pid
        const pid = this.originerList.find(item => item.id === this.id).pid
        nameList = this.originerList.filter(item => item.pid === pid && item.id !== this.id).map(({ name }) => name)
      } else {
        nameList = this.originerList.filter(item => item.pid === this.id).map(({ name }) => name)
      }
      if (nameList.includes(value)) {
        callback(new Error(value + '已存在'))
      } else {
        callback()
      }
    }
    return {
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 2, max: 10, message: '请输入2~10位字符', trigger: 'blur' },
          { validator: validateName, trigger: 'blur' }

        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 2, max: 10, message: '请输入2~10位字符', trigger: 'blur' },
          { validator: validateCode, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请选择部门负责人', trigger: 'change' }

        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 2, max: 300, message: '请输入2~300位字符', trigger: 'blur' }
        ]
      },

      employees: []
    }
  },
  created() {
    this.loadEmployees()
    this.loadDepartmentEdit()
  },
  methods: {

    // 点击编辑事件的时候，发送请求、
    async loadDepartmentEdit() {
      if (!this.edit) return
      // 如果有edit,就发送请求
      const res = await getDepartmentById(this.id)
      this.form = res.data
    },
    // 获取员工信息
    async loadEmployees() {
      try {
        const res = await getEmployees()
        this.employees = res.data
      } catch (e) {
        console.log(e)
      }
    },
    hSubmit() {
      // 点击确定做兜底校验
      if (this.edit) {
        this.doEdit()
      } else {
        this.doAdd()
      }
    },
    // 做添加业务处理
    doAdd() {
      // 做兜底校验、
      this.$refs.deptForm.validate(async valid => {
        if (!valid) return
        // 发送请求新增员工列表信息
        // 在API里面封装发送请求，在这里调用
        try {
        // 新增的员工需要获取ID。才能确保添加的部门是在你想要的子部门下面，延续树形组织结构
        // 所以需要在点击添加子部门的时候就获取其id
        // 所以需要在父组件里面操作，然后传值到子组件里面来

          const res = await getDepartment({ ...this.form, pid: this.id })
          // 提醒用户新增部门成功
          this.$message.success(res.message)
          // 添加成功就关闭dialog 并且重新获取列表信息
          // 需要在子组件里面触发父组件的关闭事件
          this.$emit('success')
        // // 添加成功后清空表单
        // this.form = {
        //   name: '', // 部门名称
        //   code: '', // 部门编码
        //   manager: '', // 部门管理者
        //   introduce: '' // 部门介绍
        // }
        } catch (e) {
          this.$message.error(e.message)
        }
      })
    },
    // 做编辑业务
    doEdit() {
      this.$refs.deptForm.validate(async valid => {
        if (!valid) return
        try {
        // 新增的员工需要获取ID。才能确保添加的部门是在你想要的子部门下面，延续树形组织结构
        // 所以需要在点击添加子部门的时候就获取其id
        // 所以需要在父组件里面操作，然后传值到子组件里面来

          const res = await updateDepartmentById(this.form)
          // 提醒用户新增部门成功
          this.$message.success(res.message)
          // 添加成功就关闭dialog 并且重新获取列表信息
          // 需要在子组件里面触发父组件的关闭事件
          this.$emit('success')
        // 添加成功后清空表单
        } catch (e) {
          this.$message.error(e.message)
        }
      })

      // 发送请求修改员工列表信息
      // 在API里面封装发送请求，在这里调用
    },
    hCancel() {
      // 点击弹框的取消按钮，关闭弹框。
      // 在子组件点击，在父组件触发事件
      this.$emit('close')
    }
  }
}
</script>
